<template>
  <div class="center">
		<h1>天津滨海机场</h1>
    <transition name="slide" mode="out-in">
      <div class="logon">
        <el-form :rules="rules" ref="loginForm" :model="loginForm" :class="overlaylong">
          <div class="overlaylong-Signin" v-if="disfiex == 0">
            <h2 class="overlaylongH2">欢迎登录</h2>
            <el-form ref="loginFormRef">
              <el-form-item prop="username">
                <input
                    type="text"
                    v-model="loginForm.username"
                    placeholder="请输入用户名"/>
              </el-form-item>
              <el-form-item prop="password">
                <input
                    type="password"
                    v-model="loginForm.password"
                    placeholder="请输入密码"/>
              </el-form-item>
            </el-form>
            <!-- <h3>Forgot your password?</h3> -->
            <div style="width: 272px;">
              <a href="#/login" style="font-size: 12px;float: right;line-height: 12px;">忘记密码?!</a>
            </div>
            <div style="width: 272px;">
              <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
              <span type="primary" class="resetButton" @click="reset">重置</span>
            </div>
            <el-button class="inupbutton" @click="submitLogin">登录</el-button>
            <span style="line-height: 24px;font-size: 16px;padding-top: 10px;" @click="returnWelcome">返回主页面</span>
          </div>
          <div class="overlaylong-Signup" v-if="disfiex == 1">
            <h2  class="overlaylongH2">注册</h2>
            <el-form :model="user"
                  label-width="80px"
                  id="editForm"
                  :rules="registerRules"
                  ref="registerForm"
                  class="loginContainer"
          >
            <el-form-item label="用户名" prop="username" required>
              <input v-model="user.username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password" required>
              <input v-model="user.password"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="password" required>
              <input v-model="user.repassword"/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" required>
              <input v-model="user.phone"/>
            </el-form-item>
            <el-form-item label="性别" prop="">
              <el-radio-group v-model="user.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="">
              <input v-model="user.remark"/>
            </el-form-item>
            <el-button type="primary" class="confirmReg" style="width: 272px;
    margin-left: 39px;" @click="register">确认注册</el-button>
          </el-form>
          </div>
        </el-form>
        <div :class="overlaytitle">
          <div class="overlaytitle-Signin" style="width: 292px;" v-if="disfiex == 0">
            <h2 class="overlaytitleH2">您好!</h2>
            <p class="overlaytitleP">
              欢迎使用天津滨海机场服务程序，登录过程中如有问题，
              可以随时反馈<a href="#/login">在线客服</a>进行实时解决。
              <br>
              还未拥有账号可以点击下方按钮进行注册！
            </p>
            <div class="buttongohs" @click="Signin">注册/Register</div>
          </div>
          <div class="overlaytitle-Signup" style="width: 292px;" v-if="disfiex == 1">
            <h2 class="overlaytitleH2">您好!</h2>
            <p class="overlaytitleP">
              注册过程中如有问题，可以随时反馈<a href="#/login">在线客服</a>进行实时解决。
            <br>
            点击下方按钮可以回到登陆界面。</p>
            <div class="buttongohs" @click="Signup">登录/Login</div>
          </div>
        </div>
      </div>
    </transition>
	</div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: "Login",
  data() {
    return {
      showLogin: true,
      overlaylong: 'overlaylong',
			overlaytitle: 'overlaytitle',
			disfiex: 0,
      captchaUrl: "",
      loginForm: {
        username: "",
        password: "",
      },
      checked: true,
      rules: {
        username: [{required: true, message: "请输入用户名", trigger: "blur"}, {
          min: 5,
          max: 14,
          message: '长度在 5 到 14 个字符',
          trigger: 'blur'
        }
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}, , {
          min: 6,
          message: '密码长度要大于6',
          trigger: 'blur'
        }],

      },
      user: {
        username: "",
        password: "",
        repassword: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      },
      registerRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: ['blur', 'change']}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur', 'change']},
          {minLength: 6, message: '密码长度不小于6位', trigger: ['blur', 'change']}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: ['blur', 'change']}
        ]
      }
    }

  },

  methods: {
    Signin() {
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			},
			Signup() {
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
 
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
 
			},
    returnWelcome() {
      this.$router.push('/')
    },
    switchToLogin() {
      this.showLogin = true;
    },
    switchToRegister() {
      this.showLogin = false;
    },
    register() {
      this.$refs.registerForm.validate(isValid => {
        if (isValid) {
          if (this.user.password.localeCompare(this.user.repassword)===0) {
          this.$axios.post("http://localhost:8888/users/register", this.user)
              .then(response => {
                if (response.data.status == 10000) {
                  this.$message({
                    message: "注册成功",
                    type: "success",
                  });
                  this.resetRegister();
                  this.switchToLogin();
                  this.Signup();
                } else {
                  this.$message.error({
                    type: "error",
                    message: response.data.msg
                  })
                }
              }
            )} else {
              this.$message.error('请确认输入的密码是否一致！');
            }
        } else {
          this.$message.error('请填写必填信息！');
        }
      })
    },
    submitLogin() {
      
      this.$axios
          .post("http://localhost:8888/users/login", {
              username: this.loginForm.username,
              password: this.loginForm.password,
          })
          .then((response) => {
            console.log(response)
            sessionStorage.setItem("username", this.loginForm.username);
            
            
            if (response.data.status == 10000) {
              let s=response.data.data.userImg;
              if (s == undefined || s == null || s == '') {
                sessionStorage.setItem("userimg", 'https://pic4.zhimg.com/v2-1df96a203a7295b0b590c7b536a88702_r.jpg?source=1940ef5c');
              } else {
                sessionStorage.setItem("userimg", response.data.data.userImg);
              }

              let permission = response.data.data.permissionList;
              let role = response.data.data.roleList;
              let token = response.data.data.tokenInfo.tokenValue;
              
               // 保存token到本地存储或内存中
              localStorage.setItem("satoken", token);
              localStorage.setItem("permission", permission);
              localStorage.setItem("role", role);
                // 这里是调用设置的方法，设置这些状态数据，如果放在main.js,那么就只会执行一次，而放在这里，每次登录成功都会执行
                // 页面第一次空白，是因为没有数据，然后就报错了，登录一次后，localStorage里面就有了数据。刷新也存在，所以mian里面，能拿到数据
                // 登录不同账号了，也是每次都确实修改了，localStorage里面的数据，但是这个设置的方法，之前都需要刷新一次，执行main里面的方法，才有效
                // 这么说，你能理解吗？ 懂了 main.js只在页面加载的时候才会执行，刷新会出发页面重新加载（ok），这个在登录的时候就设置了
              this.$store.commit('setPermission', localStorage.getItem("permission")) 
              this.$store.commit('setRole', localStorage.getItem("role")) 

              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.$router.push('/Home')
            } else {
              console.log(response.data.msg);
              // this.$message.error({
              //   type: "error",
              //   message: response.data.msg
              // })
              ElMessageBox.alert(response.data.msg, 'Title')
            }
          })
    },
    reset() {
      this.loginForm.username = ''
      this.loginForm.password = ''
      this.$message.success({
        type: "success",
        message: "重置成功"
      })
    },
    resetRegister(){
      this.user={
        username: "",
        password: "",
        repassword: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/images/bgfly8.jpg");
  background-size: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.center {
		width: 100%;
		height: 100%;
		background-image: url('https://gd-hbimg.huaban.com/9165dc3c0f8279ae5402d1f47212847bff68b49f3cb547-QEli8R');
		// background-image: url("../assets/images/bgfly8.jpg");
    background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	h1 {
		font-size: 30px;
		color: black;
	}

	.logon {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		/* position: relative;
		overflow: hidden; */
		width: 768px;
		max-width: 100%;
		min-height: 480px;
		margin-top: 20px;
		display: flex;
		background: -webkit-linear-gradient(right, #4284db, #29eac4);
	}
 
	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
 
	.overlaytitleH2 {
		font-size: 30px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleP {
		font-size: 15px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}
 
	.overlaylongH2 {
		font-size: 25px;
		color: black;
    margin-bottom: 20px;
		/* width: 250px; */
	}
 
	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
input {
		background-color: #ffffff;
		border: 1px solid #e1e1e1;
		padding: 12px 15px;
		margin: 0 ;
		width: 240px;
	}

h3{
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}
	.inupbutton{
		background-color: #29eac4;
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #fff;	
		text-align: center;
		line-height: 40px;
		margin-top: 25px;
	}

  .resetButton {
    float: right;
    font-size: 20px;
    line-height: 42px;
  }
</style>
